import type {
  AddReq,
  CreateCrudOptionsProps,
  CreateCrudOptionsRet,
  DelReq,
  EditReq,
  UserPageQuery,
} from '@fast-crud/fast-crud';

import { dict, utils } from '@fast-crud/fast-crud';
import dayjs from 'dayjs';

import * as api from './api';

export default function crud(
  props: CreateCrudOptionsProps,
): CreateCrudOptionsRet {
  return {
    crudOptions: {
      request: {
        addRequest: async ({ form }: AddReq) => await api.AddObj(form),
        delRequest: async ({ row }: DelReq) => await api.DelObj(row.id),
        editRequest: async ({ form }: EditReq) => await api.UpdateObj(form),
        pageRequest: async (query: UserPageQuery) => await api.GetPage(query),
      },
      table: { size: 'small', scroll: { fixed: true } },
      toolbar: {},
      columns: {
        id: {
          title: 'ID',
          type: 'text',
          form: { show: false },
          column: { show: false },
        },
        ip: {
          title: 'IP',
          type: 'text',
          column: { width: 120 },
          search: { show: true },
        },
        status: {
          title: '状态',
          type: 'dict-radio',
          column: { show: true, width: 100 },
          addForm: {
            value: true,
          },
          search: { show: true },
          dict: dict({
            data: [
              { value: true, label: '启用', color: 'success' },
              { value: false, label: '禁用', color: 'error' },
            ],
          }),
        },
        visits: {
          title: '访问量',
          type: 'number',
          column: { show: true, width: 80 },
          form: { show: true },
        },
        path: {
          title: '路径',
          type: 'text',
          search: { show: true },
          form: {
            helper: {
              render() {
                return (
                  <ul>
                    <li>（1）? 匹配一个字符（除过操作系统默认的文件分隔符）</li>
                    <li>（2）* 匹配0个或多个字符</li>
                    <li>
                      （3）**匹配0个或多个目录 /**/token/api/query 包含
                      /token/api/query
                    </li>
                    <li>
                      （4）{'{spring:[a-z]+}'}{' '}
                      将正则表达式[a-z]+匹配到的值,赋值给名为 spring 的路径变量
                    </li>
                    <li>
                      （5）网关的限访里
                      需要去除微服务前缀。比如在访问的/xxx-service/api/query
                      在网关中需要填写 /api/query 或者 /**/api/query
                    </li>
                  </ul>
                );
              },
            },
          },
          column: {
            width: 150,
            ellipsis: true,
          },
        },
        method: {
          title: '方法',
          type: 'dict-select',
          column: { show: true, width: 80 },
          search: { show: true },
          dict: dict({
            data: [
              { label: 'ALL', value: 'ALL', color: 'success' },
              { label: 'GET', value: 'GET', color: 'success' },
              { label: 'POST', value: 'POST', color: 'success' },
              { label: 'PUT', value: 'PUT', color: 'success' },
              { label: 'DELETE', value: 'DELETE', color: 'error' },
              { label: 'PATCH', value: 'PATCH', color: 'success' },
            ],
          }),
          form: {
            show: true,
            rules: [{ required: true, message: '请选择拦截方法' }],
          },
        },
        dateTimeRange: {
          title: '限时范围',
          type: 'datetimerange',
          valueBuilder({ row, key }: any) {
            if (!utils.strings.hasEmpty(row.startTime, row.endTime)) {
              row[key] = [dayjs(row.startTime), dayjs(row.endTime)];
            }
          },
          valueResolve({ form, key }: any) {
            const row = form;
            if (row[key] !== null && !utils.strings.hasEmpty(row[key])) {
              row.startTime = dayjs(row[key][0]).format();
              row.endTime = dayjs(row[key][1]).format();
            } else {
              row.startTime = null;
              row.endTime = null;
            }
          },
          form: {
            show: true,
            col: { span: 24 },
          },
        },
        remark: {
          title: '描述',
          type: 'textarea',
          search: { show: false },
          form: {
            show: true,
            col: { span: 24 },
          },
          column: {
            ellipsis: true,
          },
        },
        createdTime: {
          title: '创建时间',
          type: ['datetime', 'wp-readonly-time'],
        },
      },
    },
  };
}
